<template>
  <div ref="main" :style="{width: width,height:height}" :class="className"></div>
</template>

<script>
import * as echarts from 'echarts';
require('echarts/theme/infographic')
import resize from './mixins/resize'

export default {
    name:'BarChart',
    mixins: [resize],    
    props:{
        className: { 
            type: String, 
            default: 'chart' 
        },
        width:{
            type: String, 
            default: '100%' 
        },
        height:{
            type: String, 
            default: '400px' 
        },
        xData:{
            type: Array, 
            default: () => ['2022-01', '2022-02', '2022-03', '2022-04', '2022-05', '2022-06'] 
        },//横轴数据
        seriesData: {
            type: Array, 
            default: () => [10, 52, 200, 334, 390, 330] 
        }//竖轴数据

    },
    data() {
        return {
            chart: null
        }
    },
    methods: {
        initChart(){
            this.chart = echarts.init(this.$refs.main,'infographic');
            this.chart.setOption(
                {
                    title: {
                                text: '近六个月发布的文章数',
                                left: 'center'
                            },
                    xAxis: {
                        type: 'category',
                        data: this.xData
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                        data: this.seriesData,
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        }
                        }
                    ]
                }
            )           
        }
    },
    mounted() {
        // 在修改数据之后立即使用这个方法，获取更新后的 DOM
        this.$nextTick(()=>{
            this.initChart()
        });  
    },
    beforeDestroy() {
        if(!this.chart){
            return
        }
        // 删除绑定
        this.chart.dispose()
        this.chart=null
    },
}
</script>

<style>

</style>